<template>
  <ul class="product-list">
    <li
      v-for="(item, index) in productListCopya[0] &&
      productListCopya[0].brandList"
      :key="index"
      class="product-box"
    >
      <div class="picture">
        <img class="photo" :src="item.brandImg" alt="" />
        <img class="photo-frame" src="../static/photo_frame@3x.png" alt="" />
      </div>
      <div class="detail">
        <div class="title" @click="aa">
          <span>{{ item.brandName }}</span>
          <img src="../static/arrow@3x.png" alt="" />
        </div>
        <div class="popularity-value">
          <img src="../static/popular_flame3x.png" alt="" />
          {{ item.brand_count || 0 }}人气值
        </div>
        <div class="abstract">
          {{ item.remark }}
        </div>
        <div class="thumbs-up" @click="thumbUp(item.brandId)">
          <img src="../static/heart@3x.png" alt="" /> 点赞{{
            item.uid_good_num ? '+' + item.uid_good_num : ''
          }}
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
// import { login } from 'kwapi/dist/common/utils'
import { addBrandGood } from '../api/brandGood'
export default {
  name: 'ProductList',
  props: {
    productList: {
      type: Array,
      default() {
        return []
      },
    },
    currtEr: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      productListCopy: [],
    }
  },
  methods: {
    aa() {
      console.log(this.currtEr)
    },
    thumbUp(e) {
      // const _this = this
      this.$emit('onLoad', true)
      console.log(e) // 点赞列表id
      console.log(this.productListCopya[0].id) // 类别id
      addBrandGood(this.productListCopya[0].id, e).then(
        (res) => {
          console.log(res)
          // if (res.data.code !== 1001) {
          //   return
          // }
          this.$emit('updateNum', this.productListCopya[0].id, this.currtEr)
          setTimeout(() => {
            this.$emit('onLoad', false)
            this.$emit('onMessage', res.data.message)
          }, 500)
        },
        (res) => {
          setTimeout(() => {
            this.$emit('onLoad', false)
          }, 500)
        }
      )
      console.log(this.productListCopya[0].id, this.currtEr)
    },
  },
  computed: {
    productListCopya() {
      // console.log(this.productList)
      return this.productList.filter((item) => item.id === this.currtEr)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../assets/sass/mixin.scss';
@import '../assets/sass/reset.scss';
@import '../assets/sass/_variable.scss';
.product-list {
  width: rem(702);
  margin: rem(24);
  .product-box {
    // width: 100%;
    // height: 253 rem();
    border-radius: rem(24);
    margin-bottom: rem(16);
    display: flex;
    padding: rem(33) rem(20) rem(40) rem(24);
    background: linear-gradient(0deg, #ffffff 0%, #fff6f6 50%, #ffdcd0 100%);
    .picture {
      width: rem(180);
      position: relative;
      height: rem(180);
      border-radius: rem(24.36);
      overflow: hidden;
      .photo {
        position: absolute;
        width: rem(151);
        height: rem(151);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .photo-frame {
        position: absolute;
        width: rem(180);
        height: rem(180);
        border-radius: rem(18.27);
      }
    }
    .detail {
      width: rem(448);
      height: rem(180);
      margin-left: rem(20);
      position: relative;
      .title {
        position: absolute;
        margin: rem(3);
        width: rem(278);
        height: rem(45);
        font-size: rem(32);
        color: #262626;
        display: flex;
        align-items: center;
        span {
          max-width: rem(270);
          text-align: left;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        img {
          margin-left: rem(8);
          width: rem(16);
          height: rem(16);
        }
      }
      .popularity-value {
        position: absolute;
        top: rem(64);
        height: rem(33);
        font-size: rem(24);
        color: #f7423a;
        line-height: rem(33);
        img {
          margin-right: rem(4);
          width: rem(20);
          height: rem(20);
        }
      }
      .abstract {
        width: rem(434);
        height: rem(76);
        position: absolute;
        bottom: rem(-10);
        font-size: rem(24);
        color: #ba7e50;
        letter-spacing: 0;
        line-height: rem(38);
      }
      .thumbs-up {
        position: absolute;
        width: rem(152);
        height: rem(68);
        border-radius: rem(34);
        font-size: rem(24);
        top: rem(-5);
        right: rem(8);
        display: flex;
        align-items: center;
        text-align: center;
        color: #f02b22;
        font-family: PingFangSC-Semibold;
        background: linear-gradient(180deg, #ffd3d3 0%, #fff7f7 100%);
        img {
          width: rem(54);
          height: rem(54);
          margin: 0 rem(7);
        }
      }
    }
  }
}
</style>
